<template>
  <BackageContainer>
    <AppBar @prve="handleBack">
      <div class="flex flex-col gap-y-2 justify-center items-center">
        <SegmentedSelect v-model="sliderIndex" :items="['歌谱', '播放器', '歌词']" :padding="4" />
      </div>
    </AppBar>
    <div id="a-scale-line"></div>
    <div class="w-full h-[calc(100%)] pt-[84px]">
      <STabsWindow class="h-full" v-model="sliderIndex" ref="stabsWindowRef">
        <SwiperSlide class="h-full">
          <SongScore :src="gepuUrl" :pdfUrl="pdfUrl" v-if="gepuUrl && sliderIndex === 0"></SongScore>
          <div v-else class="w-full h-full flex items-center justify-center text-subtitle">暂无歌谱</div>
        </SwiperSlide>
        <SwiperSlide class="h-full w-full">
          <PlayCom :id="id" :gedanid="gedanid" :type="type" />
        </SwiperSlide>
        <SwiperSlide class="h-full">
          <LyricVue :height="`100%`"></LyricVue>
        </SwiperSlide>
      </STabsWindow>
    </div>
  </BackageContainer>
</template>

<script setup lang="ts">
import LyricVue from "./components/StraLyric.vue";
import AppBar from "./components/AppBar.vue";
import AudioList from "@/utils/audio-list/main";
import { useStore } from "vuex";
import { computed, onMounted, ref } from "vue";
import useAudioShortKey from "@/hooks/useAudioShortKey";
import { SwiperSlide } from "swiper/vue";
import STabsWindow from "@/components/STabsWindow.vue";
import SongScore from "./components/SongScore.vue";
import PlayCom from "./components/PlayCom/index.vue";
import BackageContainer from "@/layout/BackageContainer.vue";
import { useRoute, useRouter } from "vue-router";
import SegmentedSelect from "@/components/SegmentedSelect/index.vue";
const router = useRouter();
const route = useRoute();
useAudioShortKey();
const props = defineProps({
  id: {
    // 歌曲ID号
    type: String,
    required: true,
  },
  gedanid: {
    // 我的歌单的id
    type: [String, Number],
    default: 0,
  },
  type: {
    // 歌单的类型 可选值是 shiji 和 gedan
    type: String,
    default: "shiji",
  },
});
const sliderIndex = ref(1);
const store = useStore();

const info = computed(() => {
  return store.state.audio.info;
});

const title = computed(() => {
  if (info.value.mulu && info.value.xuhao) {
    return `${info.value.xuhao}.${info.value.mulu}`;
  }
  return "加载中...";
});

const lyric = computed<string[]>(() => {
  if (info.value.lyric) {
    return `${title.value}\n${info.value.lyric}`.split("\n");
  }
  return ["暂无歌词"];
});
const gepuUrl = computed(() => {
  if (info.value.dmtUrl) {
    const { dmtUrl } = info.value;
    const { gepuUrl } = dmtUrl;
    if (gepuUrl !== "") {
      return gepuUrl;
    }
    return "";
  }
  return "";
});

const pdfUrl = computed(() => {
  if (info.value.dmtUrl) {
    const pdfUrl = info?.value?.dmtUrl?.pdfUrl;
    if (pdfUrl) {
      return pdfUrl;
    }
    return "";
  }
  return "";
});

onMounted(() => {
  handlerList();
});
function handleBack() {
  if (props.type === "gedan") {
    router.back();
    return;
  }
  if (route.query.from) {
    router.replace(route.query.from as any);
    return;
  }
  router.replace("/sgb");
}

function handlerList() {
  return new Promise((resolve) => {
    const uid = route.query.shareUid || null;
    store
      .dispatch("sgb/getGeDanList", {
        type: props.type,
        id: props.gedanid,
        uid,
      })
      .then((res) => {
        const index = res.list.findIndex((item: any) => item._id === props.id);
        AudioList.audioList.setPlayerList(
          res.list.map((item: any) =>
            AudioList.transformPlayerList(item, {
              title: "mulu",
              src: "dmtUrl.adUrl",
              serial: "xuhao" as any,
            })
          ),
          index
        );
        resolve(res.list);
      });
  });
}
</script>
<script lang="ts">
import { PLAYNEWPAGENAME } from "@/utils/constant";
export default {
  name: PLAYNEWPAGENAME,
};
</script>
